<template>
  <div class="person">
    姓： <input type="text" v-model="firstName" /> <br />
    名： <input type="text" v-model="lastName" /> <br />
    全名: <span>{{ fullName }}</span><br />
    全名: <span>{{ fullName }}</span><br />
    全名: <span>{{ fullName }}</span><br />
    全名: <span>{{ fullName }}</span><br />
    全名: <span>{{ fullName }}</span><br />
    全名: <span>{{ fullName }}</span><br />
    <hr />
    方法: <span>{{ fullName2() }}</span><br />
    方法: <span>{{ fullName2() }}</span><br />
    方法: <span>{{ fullName2() }}</span><br />
    方法: <span>{{ fullName2() }}</span><br />
    方法: <span>{{ fullName2() }}</span><br />
    方法: <span>{{ fullName2() }}</span><br />
    <hr />
    <h3>可读可写的computed</h3>
    <span>{{ fullName3 }}</span><br />
    <button @click="changeName">更改fullName3为李四</button>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
let firstName = ref('zhang')
let lastName = ref('san')
// 这么定义的fullName是一个计算属性，且是只读的，无法更改fullName的返回值
let fullName = computed(() => {
  console.log('我是计算属性computed') //计算属性有缓存，当页面多次使用到fullName时只会执行一遍
  return (
    firstName.value.slice(0, 1).toUpperCase() +
    firstName.value.slice(1) +
    '-' +
    lastName.value.slice(0, 1).toUpperCase() +
    lastName.value.slice(1)
  )
  //  计算属性return的是一个ref定义的变量
})
function fullName2() {
  console.log('我是方法') //方法是没有缓存的，会执行多次
  return (
    firstName.value.slice(0, 1).toUpperCase() +
    firstName.value.slice(1) +
    '-' +
    lastName.value.slice(0, 1).toUpperCase() +
    lastName.value.slice(1)
  )
}

// 这么定义的fullName3是一个计算属性，可读可写
let yenan = ref('yenan')
let orange = ref('juzi')
let fullName3 = computed({
  get() {
    return (
      yenan.value.slice(0, 1).toUpperCase() +
      yenan.value.slice(1) +
      '-' +
      orange.value.slice(0, 1).toUpperCase() +
      orange.value.slice(1)
    )
  },
  set(val) {
    console.log('我是set', val)
    const [str1, str2] = val.split('-')
    yenan.value = str1
    orange.value = str2
  },
})
function changeName() {
  fullName3.value = 'YeNan-ManJian' //此处漂红应该是ts版本、或者插件版本不同导致的，并不影响功能
}
</script>
<style>
button {
  margin-left: 10px;
}
</style>
